/**
 * desc:modal层展示商品信息列表html
 * @item {obj} 商品的信息
 * @type {string} 1:单个商品 2：组合商品
 * @onClick {func} 点击查看组合商品详情
 * @handleSelect {func} 点击勾选
 *
 */
import React from "react";
import { Button, Empty, Tooltip, Checkbox } from "antd";
import CommonPage from "@/components/CommonPagination";
import styles from "./index.module.less";
import CommonZjfImg from "@/components/CommonImg/ZifComponent";
import { formatAmount, openUrl } from "@/utils/utils";
import { findIndex } from "lodash";

export default ({ type = "1", item, handleChange, handleSelect, selectGoodId, selectComposeId, handleClear }) => {
	const pagination = {
		current: item.current || 1,
		pageSize: item.size || 10,
		total: item.total || 0,
		size: "small",
		showQuickJumper: true,
		pageSizeOptions: [10, 20, 50, 500]
	};

	console.log("selectGoodId=>>>", selectGoodId);

	if (item.records) {
		if (item.records.length > 0) {
			if (type == 1) {
				return (
					<>
						<div className={styles.wrapBox}>
							{item.records.map((v, index) => (
								<div
									className={styles.wrap}
									key={index}
									style={{
										borderTop: index == 0 ? "none" : "1px solid #F0F0F0"
									}}
								>
									<Checkbox
										onChange={e => {
											handleSelect(e.target.checked, v.goodsId);
										}}
										checked={findIndex(selectGoodId, o => o == v.goodsId) > -1}
										style={{ marginRight: "8px" }}
									></Checkbox>
									<CommonZjfImg img={v.goodsImage} storeId={v.storeId} size="64" isCloudIcon={v.isCarefullySelected} />
									<div className={styles.section}>
										<div>
											<Tooltip title={v.goodsName}>
												<div
													style={{ width: "100%" }}
													onClick={() => openUrl(`${GOODS_HREF}${v.goodsId}`)}
													className="textOverflowMultiTwo common-color2"
												>
													{v.goodsName}
												</div>
											</Tooltip>
										</div>
										<div className={styles.msgBox}>
											<Tooltip title={v.size}>
												<span style={{ marginRight: "40px", maxWidth: "200px" }} className="text-overflow">
													尺码：{v.size}
												</span>
											</Tooltip>
											<Tooltip title={v.color}>
												<span style={{ maxWidth: "200px" }} className="text-overflow">
													颜色：{v.color}
												</span>
											</Tooltip>
										</div>
										<div>
											<span>
												价格：
												<span className="common-color9">
													￥
													{(v.vipPrice || v.vipPrice == 0) && v.vipPrice < v.goodsPrice
														? formatAmount(v.vipPrice)
														: formatAmount(v.goodsPrice)}
												</span>
											</span>
											<span style={{ marginLeft: "40px" }}>数量：{v.goodsStorage} 个</span>
										</div>
									</div>
								</div>
							))}
						</div>
						<div style={{ display: "flex", justifyContent: "space-between" }}>
							<div style={{ padding: "12px 24px 0 24px" }}>
								当前已选择
								<span className="common-color9">{selectGoodId.length}</span>条
								<Button type="link" onClick={handleClear}>
									清空
								</Button>
							</div>
							<div style={{ marginTop: "12px" }}>
								<CommonPage pagination={pagination} handleChange={handleChange} />
							</div>
						</div>
					</>
				);
			} else {
				return (
					<>
						<div className={styles.wrapBox}>
							{item.records.map((v, index) => (
								<div
									className={styles.wrap}
									key={index}
									style={{
										borderTop: index == 0 ? "none" : "1px solid #F0F0F0"
									}}
								>
									<Checkbox
										onChange={e => {
											handleSelect(e.target.checked, v.id);
										}}
										checked={findIndex(selectComposeId, o => o == v.id) > -1}
										style={{ marginRight: "8px" }}
									></Checkbox>
									<img className={styles.img} style={{ cursor: "pointer" }} src={`${v.composeImage}`} />
									<div className={styles.section}>
										<div className="textOverflowMultiTwo common-color2">{v.composeName}</div>
										<div className={styles.msgBox}>
											<span>
												价格：
												<span className="common-color9">￥{formatAmount(v.composePrice)}</span>
											</span>
										</div>
									</div>
								</div>
							))}
						</div>
						<div style={{ display: "flex", justifyContent: "space-between" }}>
							<div style={{ padding: "12px 24px 0 24px" }}>
								当前已选择
								<span className="common-color9">{selectComposeId.length}</span>条
								<Button type="link" onClick={handleClear}>
									清空
								</Button>
							</div>
							<div style={{ marginTop: "12px" }}>
								<CommonPage pagination={pagination} handleChange={handleChange} />
							</div>
						</div>
					</>
				);
			}
		}
		return <Empty description="未查询到符合条件的商品" />;
	} else {
		return (
			<div className={styles.result} style={{ color: "#FF7A23" }}>
				{type == "1" ? "点击上方查询按钮或输入商品链接搜索商品" : "点击上方查询按钮搜索组合商品"}
			</div>
		);
	}
};
